import React,{Component} from "react";
import style from "./index.module.scss";
import {dbConnTest} from "../../serverAPI/index";

import { Skeleton, Divider} from 'antd';

class TestView extends Component {
    constructor(props){
        super(props);
        this.state = {
            loading:true,
            active: true,
            size: 'default',
            buttonShape: 'default',
            avatarShape: 'circle',
        };
    }

    handleActiveChange = checked => {
        this.setState({ active: checked });
      };
    
      handleSizeChange = e => {
        this.setState({ size: e.target.value });
      };
    
      handleShapeChange = prop => e => {
        this.setState({ [prop]: e.target.value });
      };

   

    render(){
        const { active, size, buttonShape, avatarShape,loading } = this.state;
        return (
            <div className={style["index-root"]}>
               <p>组件测试</p>
               <div className={style["SkeletonBox"]}>
                   <div className={style["sellerinfo-box"]}>
                       <div>
                            <Skeleton.Avatar active={active} style={{width:"50px",height:"50px",borderRadius:"50%"}} shape="default" />
                       </div>
                       <div>
                            <Skeleton.Button active={active} style={{width:"200px",borderRadius:"5px"}} size="small" shape="default"  />
                            <p></p>
                            <Skeleton.Button active={active} style={{width:"240px",borderRadius:"5px"}} size="small"  shape="default"  />
                       </div>
                   </div>

                   <div className={style["price-box"]}>
                        <Skeleton.Button active={active} style={{width:"240px",borderRadius:"5px"}} size="small"  shape="default"  />
                        <p></p>
                        <Skeleton.Button active={active} style={{width:"290px",borderRadius:"5px"}} size="small" shape="default"  />
                    </div>

                    <div className={style["ditails-box"]}>
                       <div>
                        <Skeleton.Image style={{width:"120px",height:"120px"}} />
                        <Skeleton.Image style={{width:"120px",height:"120px"}} />
                       </div>
                       <div>
                            <Skeleton.Button active={active} style={{width:"240px",borderRadius:"5px"}} size="small"  shape="default"  />
                            <p></p>
                            <Skeleton.Button active={active} style={{width:"270px",borderRadius:"5px"}} size="small"  shape="default"  />
                         </div>
                        <Divider />
                        <div>
                            <Skeleton.Button active={active} style={{width:"240px",borderRadius:"5px"}} size="small"  shape="default"  />
                            <p></p>
                            <Skeleton.Button active={active} style={{width:"270px",borderRadius:"5px"}} size="small"  shape="default"  />
                         </div>
                    </div>
                </div>
                
            </div>
        )
    }
}

export default TestView;